<template>
  <div class="home">
    <div class="box">
        <div class="list" v-for="x,i in themes" :key="i">
            <p class="title">{{ x.title }}</p>
            <div class="btu">
                <img @click="xqy(c)" class="tu" v-for="c,i in x.templates" :key="i" v-lazy="c.designTemplateImageUrl" alt="">
                <button @click="gd(x.id,i)" class="gd">查看更多</button>
            </div> 
        </div>
        <br>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            themes:[]
        }
    },
    created(){
        this.fb()
    },
    methods:{
        fb(){
            this.$http.get(`/api/solutionSubject/themeDetail.do?_dataType=json&_dataClientType=3&client_type=40&themeId=${this.$route.query.id}&templatePageSize=6`).then(res=>{
            this.themes=res.data.body.data.theme.themeExtends
            console.log(res.data.body.data.theme.themeExtends);
           })
        },
        gd(x,i){
            if(!this.themes[i].page){
                this.themes[i].page=1
            }
            this.themes[i].page++
            this.$http.get(`/api/solutionSubject/themeExtend/template.do?_dataType=json&_dataClientType=3&client_type=40&themeExtendId=${x}&pageSize=6&pageNum=${this.themes[i].page}`).then(res=>{
                this.themes[i].templates=this.themes[i].templates.concat(res.data.body.data.templates)
           })
        },
        xqy(x){
            console.log(x);
            this.$router.push({
                path:'/xq',
                query:{
                    id:x.designTemplateId
                }
            })
        }
    }
}
</script>

<style scoped>
    .list{
        text-align: center;
    }
    .btu{
        padding: .24rem;
    }
    .tu{
        margin-left: 0.089rem;
        margin-right: 0.089rem;
        width: 2.16rem;
    }
    .title{
        font-size: 0.32rem;
        margin-top:.24rem ;
        margin-bottom: .48rem;
    }
    .gd{
        width: 3rem;
        height: .8rem;
        border-radius: .8rem;
        border:none;
        background-color: #f9fafd;
        font-size: .25rem;
        color: #767678;
    }
</style>